<script setup lang='ts'>
const props = withDefaults(defineProps<{
    length?: number,
    color?: string
}>(), {
    length: 12,
    color: '#fff'
})
</script>
<template>
    <div class="box" :style="`width:${props.length}px;height:${props.length}px;`"></div>
</template>
<style lang='less' scoped>
.box {
    border-radius: 50%;
    overflow: hidden;
    // border: 1px solid black;
    box-sizing: border-box;

    &::before,
    &::after {
        content: '';
        width: 100%;
        height: 50%;
        display: block;
        background-color: v-bind('props.color');
    }

    &::before {
        transform-origin: 50% 100%;
        animation: pacman-upper .5s linear;

    }

    &::after {
        transform-origin: 50% 0;
        animation: pacman-lower .5s linear;

    }

    @keyframes pacman-upper {

        from,
        50%,
        to {
            transform: rotate(0);
        }

        25%,
        75% {
            transform: rotate(-45deg);
        }
    }

    @keyframes pacman-lower {

        from,
        50%,
        to {
            transform: rotate(0);
        }

        25%,
        75% {
            transform: rotate(45deg);
        }
    }
}
</style>
